<template>
  <el-dialog title="查看团队" :visible.sync="visible" :close-on-click-modal="false" class="team-dialog" :before-close="handleCloseDialog"
    width="1200px">
    <div class="top-container"><span>当前用户: {{ row.phoneNo }}</span>  状态: <span class="el-dropdown-link">{{ formatState(row.state) }}</span></div>
    <el-card class="filter-container" shadow="never">
      <div>
        <el-button style="float:right" type="primary" @click="handleSearchList()" size="mini">
          查询搜索
        </el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="mini">
          重置
        </el-button>
      </div>
      <div>
        <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
          <el-form-item label="手机号码：">
            <el-input v-model="listQuery.phoneNo" class="input-width" placeholder="请输入手机号码" clearable></el-input>
          </el-form-item>
          <el-form-item label="注册时间：">
            <el-date-picker v-model="listQuery.date" type="daterange" range-separator="至" clearable
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

        </el-form>
      </div>
    </el-card>
    <div class="options-btns"><el-button size="small" type="danger" @click="handleDisable">封禁团队</el-button></div>
    <el-tabs v-model="activeName" type="card" style="margin: 15px 0 5px;" @tab-click="handleTabChange">
        <el-tab-pane label="直推" name="tab1"></el-tab-pane>
        <el-tab-pane label="伞下所有人" name="tab2"></el-tab-pane>
    </el-tabs>

    <div class="table-container team-container">
      <el-table ref="adminTable" size="mini" :data="list" style="width: 100%;" v-loading="listLoading" border>
        <el-table-column label="昵称" width="160"  align="center">
          <template slot-scope="scope">{{ scope.row.nickname }}</template>
        </el-table-column>
        <el-table-column label="手机号码" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.phoneNo }}</template>
        </el-table-column>
        <el-table-column label="余额" width="140"  align="center">
          <template slot-scope="scope">{{ formatAmount(scope.row.balance) }}</template>
        </el-table-column>
        <el-table-column label="佣金" width="140"  align="center">
          <template slot-scope="scope">{{ formatAmount(scope.row.rebateAmount || 0) }}</template>
        </el-table-column>
        <el-table-column label="充值" width="140" align="center">
          <template slot-scope="scope">{{ formatAmount(scope.row.rechargeAmount || 0) }}</template>
        </el-table-column>
        <el-table-column label="提现" width="140" align="center">
          <template slot-scope="scope">{{ formatAmount(scope.row.withdrawAmount || 0) }}</template>
        </el-table-column>
        <el-table-column label="会员等级" width="140"  align="center">
          <template slot-scope="scope">{{ scope.row.memberLevel }}</template>
        </el-table-column>
        <el-table-column label="团队人数" width="145" align="center">
          <template slot-scope="scope">{{ scope.row.teamSize }}</template>
        </el-table-column>
      </el-table>
    </div>

      <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize" :page-sizes="[5, 10, 15, 20]" :total="total">
      </el-pagination>
    </div>




  </el-dialog>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("member");
import { formatDate } from '@/utils/date';
import { formatAmount } from "@/utils/index";
import { teamMemberInfo,teamMemberBelow,disableMemberTeam } from '@/api/member';

const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  phoneNo: null,
  date: []

};
export default {
  data() {
    return {
      loading: false,
      visible: true,
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      activeName:'tab1'
    };
  },
  props: {
    row: {
      type: Object,
      default: {}
    },

  },
  computed: {
    ...mapState({
      statusOptions: state => [...[{ label: '全部状态', value: null }], ...state.routes.statusOptions]
    })
  },
  mounted() {
    this.getList();
  },
  methods: {
    formatAmount,
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
      this.getList();
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    
    //关闭弹框
    handleCloseDialog() {
      this.$emit("handle-cancel");
    },
    // 格式化状态
    formatState(value) { 
      return this.statusOptions.find(item => item.value === value).label;
    },
    //tab 切换
    handleTabChange(e) { 
      this.listQuery=defaultListQuery;
      this.getList();
    },
    //封禁团队
    handleDisable(){
     this.$confirm('是否要封禁团队?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disableMemberTeam({memberId:this.row.id}).then(response => {
          this.$message({
            type: 'success',
            message: '封禁团队成功!'
          });
          this.getList();
        });
      });
    },
    getList() {
      this.listLoading = true;
      let params = {...this.listQuery,parentId:this.row.id};
      if(params.date&&params.date.length>0){
        params.startTime = formatDate(params.date[0],"yyyy-MM-dd hh:mm:ss");
        params.endTime = formatDate(params.date[1],"yyyy-MM-dd hh:mm:ss");
      }
      delete params.date;
      if(this.activeName==='tab2'){
        teamMemberInfo(params).then(response => {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
        });

        return;

      }
      teamMemberBelow(params).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    }
  }
};
</script>
<style  lang="scss">
.top-container{
  margin-bottom: 15px;
  span{
    margin-right: 30px;
   
  }
}
.options-btns{
  position: absolute;
  left: 220px;
  top: 162px;
  z-index:99;
}

.team-container{
  height: calc(100vh - 600px);
  .el-table__body-wrapper{
    height: calc(100vh - 640px);
    overflow-y: auto;
  }
}

.team-dialog{
 .el-dialog__body{
    height: 60vh!important;
    overflow: hidden;
  }
}
</style>